<template>
  <div>
    <scroll
      class="wrapper"
      :class="{wrapperFree: isShowHomeBtn}"
      :data="boomlist"
      :pullup="pullup"
      :pulldown="pulldown"
      @pulldown="loadData"
      @pullup="nextpage"
    >
      <productsList :list="boomlist" @link-to="linkTo" :title="title"></productsList>
      <PageTip :tipshow="tipshow"></PageTip>
    </scroll>
    <router-link class="btn btn-home" to="/" v-if="isShowHomeBtn" ref="btnHome">首页</router-link>
    <loading :loading="loading">加载中...</loading>
  </div>
</template>

<script>
  import ProductsList from './components/ProductsList'
  import Scroll from '@/components/Scroll'
  import PageTip from './components/PageTip'
  import Loading from '@/components/Loading'
  import { Button } from 'vant'
  import { getVideoListByType } from '@/api/fetch'
  import { homeLinkTo as linkTo } from '~js/common'

  export default {
    name: 'MoreBoom',
    components: {
      ProductsList,
      Scroll,
      PageTip,
      Loading
    },
    data() {
      return {
        boomlist: [],
        pulldown: true,
        pullup: true,
        page: 1,
        title: '',
        tipshow: '1',
        loading: true,
        isShowHomeBtn: false
      }
    },
    beforeRouteEnter(to, from, next) {
      let title = to.meta && to.meta.title
      if(to.query.type == 1) {
        document.title = '爆款推荐'
      }
      if(to.query.type == 2) {
        document.title = '大师课程'
      }
      if(to.query.type == 3) {
        document.title = '明星讲师'
      }
      if(to.query.type == 4) {
        document.title = '免费专区'
      }
      if (title && to.query.type == 10086) {
        document.title = '赠送课程'
        next(vm => {
          vm.isShowHomeBtn = true
        })
      } else {
        next()
      }
    },
    beforeRouteLeave (to, from, next) {
      this.isShowHomeBtn = false
      next()
    },
    activated() {
      this.loadData()
    },
    mounted() {

    },
    methods: {
      loadData() {
        this.fetchVideoListByType(1).then(res => {
          if (res.errcode === 0) {
            this.page = 1
            this.tipshow = 1
            this.boomlist = res.data || []
            this.title = res.titile
          }
        })
      },

      nextpage() {
        this.page = this.page + 1
        this.fetchVideoListByType(this.page).then(res => {
          if (res.data.length > 0) {
            this.boomlist = this.boomlist.concat(res.data)
          } else {
            this.page = this.page - 1
            this.tipshow = 0
          }
        })
      },

      async fetchVideoListByType(thepage) {
        const res = await getVideoListByType({
          page: thepage,
          type_id: this.$route.query.type,
        })
        this.loading = false
        return res
      },

      linkTo(obj) {
        let routeName = linkTo(obj.type)
        // TODO: 逻辑判断
        this.$router.push({
          name: routeName,
          query: {
            vid: obj.vid,
          },
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  @import '~less/variable.less';
  @import '~less/mixins.less';
  .wrapper {
    height: 100vh;
    overflow: hidden;
  }
  .wrapperFree {
    .h100();
    margin-bottom: 50px;
    overflow: hidden;
  }
  .btn-home {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 33px;
    height: 33px;
    text-align: center;
    color: @bg-color;
    background: @font-tab;
  }
</style>
